import "./page-context";
import "./maintenance-table";
import "../styles/index.scss";
import "./chart-init";
import "./part-life-chart";
import * as bootstrap from "bootstrap";
import Window from "@/modules/components/Window";
import "./bootstrap-table";
import $ from "jquery";
import createTableAsync from "./part-table";
import { PageContext } from "./page-context";
import "./part-life-init";

let partTableModal: bootstrap.Modal;

function initToolTip() {
  const tooltipTriggerList = document.querySelectorAll(
    '[data-bs-toggle="tooltip"]'
  );
  const list = [...tooltipTriggerList];

  list.forEach((tooltipTriggerEl) => {
    new bootstrap.Tooltip(tooltipTriggerEl);
    if (tooltipTriggerEl.id === "openTableButton") {
      tooltipTriggerEl.addEventListener("click", () => {
        partTableModal?.show();
      });
    }
  });
}

PageContext.onLoaded((viewModel) => {
  $("#goToMaintenanceButton").on("click", () => {
    window.location.href =
      "/device-maintenance/home?deviceHostId=" +
      encodeURIComponent(viewModel.deviceHostId);
  });

  $("#goToHomeButton").on("click", () => {
    window.location.href = "/mixing-process/home/index.html";
  });

  const modalElement = $("#partTableModal");

  if (modalElement != null) {
    modalElement.on("shown.bs.modal", () => {
      createTableAsync(viewModel);
    });
    partTableModal = new bootstrap.Modal(modalElement.get(0)!);
  }
});

$(async () => {
  Window.create(
    1920,
    937,
    () => $("#app").get(0) as HTMLDivElement,
    () => $("#main").get(0) as HTMLDivElement
  );
  Window.autoResize();

  initToolTip();

  $(window).on("resize", () => {
    Window.autoResize();
  });
});
